<template>
  <basic-container>
    <div class="header">
      <TitleComponent mainTitle="视频教程" />
      <el-button text type="primary" @click="router.push('/index')">主页</el-button>
    </div>
    <div class="crud_content">
      <avue-crud :option="option" :data="crudData.data" ref="crud" v-model="crudData.form"
        :table-loading="crudData.loading" @search-change="searchChange" @search-reset="searchReset"
        @refresh-change="refreshChange" @selection-change="selectionChange" @on-load="onLoad">
        <template #menu="{ row }">
          <el-dropdown @command="(command) => handleCommand(command, row)">
            <el-icon style="rotate: 90deg;cursor: pointer" size="20">
              <More />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="edit">编辑</el-dropdown-item>
                <el-dropdown-item command="delete">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template #publishedFlag="{ row }">
          <span>{{ row.publishedFlag ? "已发布" : "未发布" }} </span>
        </template>
        <template #id-label>
          ID
        </template>
        <template #menu-left="{ row }">
          <el-button class="btn" type="danger" @click="delsHandler">
            批量删除
          </el-button>
        </template>
        <template #sort="{ row }">
          <div class="order">
            <el-popover :visible="row.visible" placement="right" :width="200" trigger="click">
              <template #reference>
                <a style="color: #4e9876; border-bottom: dashed 1px #4e9876;" href="javascript:void(0);"
                  @click="row.visible = true"> {{
                    row.sort
                  }}</a>
              </template>
              <div class="hover_box">
                <el-input v-model="row.sort" placeholder=""></el-input>
                <div style="margin-top: 10px; display: flex;justify-content: flex-end;">
                  <el-button type="" class="btn" @click="row.visible = false">取消</el-button>
                  <el-button color="#4E9876" @click="orderSubmit(row)">提交</el-button>
                </div>
              </div>
            </el-popover>
          </div>
        </template>
        <template #menu-form="{ size }">
          <div class="btns_box">
            <el-button icon="el-icon-delete" @click="handleEmpty">重置</el-button>
            <div class="right_box">
              <!-- <el-checkbox v-model="crudData.form.edit" label="继续编辑" size="large" />
              <el-checkbox v-model="crudData.form.creat" label="继续创建" size="large" v-if="crudData.isEdit" />
              <el-checkbox v-model="crudData.form.view" label="查看" size="large" class="view_btn" /> -->
              <el-button icon="el-icon-user" type="primary" @click="handleSubmit">提 交</el-button>
            </div>
          </div>
        </template>
      </avue-crud>
    </div>
    <el-dialog v-model="crudData.confirmDeleteVisible" title="" width="440" destroy-on-close center class="custom-dialog">
      <div class="swal2-header">
        <div class="swal2-icon swal2-question swal2-animate-question-icon"></div>
        <div class="swal2_fs">确认删除？</div>
      </div>
      <div class="swal2_he">ID - {{ crudData.delIds }}</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button color="#488C6D" class="btn btn-primary" @click="handleDeleteConfirm">
            确认
          </el-button>
          <el-button class="btn" type="" @click="handleDeleteCancel">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
  </basic-container>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import TitleComponent from "@/components/title/index.vue";
import { getList, remove, update, save } from "@/api/refersh/Article.js";

const ids = computed(() => (crudData.selectionList.map(item => item.id)))
import Cookies from 'js-cookie'

const crud = ref('')
import Editor from '@/components/Editor/index.vue';
import BasicContainer from "@/components/basic-container/main.vue";
import { useRouter } from "vue-router";

const router = useRouter();
const option = reactive({
  saveBtn: false,
  updateBtn: false,
  cancelBtn: false,
  rowKey: 'id',
  height: 'auto',
  calcHeight: '8',
  searchShow: true,
  searchMenuSpan: 6,
  tip: false,
  border: true,
  index: false,
  viewBtn: false,
  editBtn: false,
  delBtn: false,
  menuWidth: 100,
  addBtn: true,
  dialogWidth: '40%',
  menuFixed: 'right',
  labelWidth: 130,
  menu: true,
  selection: true,
  searchLabelWidth: 110,
  indexLabel: '序号',
  saveBtnText: '确定',
  refreshBtn: true, // 刷新按钮
  columnBtn: false,
  searchShowBtn: false,
  indexWidth: 60,
  align: 'center',
  column: [
    {
      label: "编号",
      prop: "id",
      sortable: true,
      search: true,
      disabled: true,
      addDisplay: false,
      order: 2,
      span: 24
    },
    {
      label: "名称",
      prop: "name",
      search: true,

      prefixIcon: 'el-icon-edit',
      order: 2,
      span: 24

    },
    {
      label: "详情",
      prop: "detail",
      component: Editor,
      order: 2,
      hide: true,
      span: 24
    },
    {
      label: "排序",
      prop: "sort",
      sortable: true,
      type: "number",
      order: 1,
      controlsPosition: 'top',
      span: 24
    },

    {
      label: "是否发布",
      prop: "publishedFlag",
      order: 2,

      type: "switch",
      dicData: [{
        label: '',
        value: false
      }, {
        label: '',
        value: true
      }],
      span: 24
    },

    {
      label: "创建时间",
      prop: "createTime",
      type: "datetime",
      span: 24,
      addDisplay: false,
      disabled: true,
    },
    {
      label: "更新时间",
      prop: "updateTime",
      type: "datetime",
      span: 24,
      addDisplay: false,
      disabled: true,
    },
  ],
});

let crudData: any = reactive({
  loading: true,
  delIds: '',
  selectionList: [],
  confirmDeleteVisible: false,
  form: {
    edit: true,
    creat: "",
    view: "",
  },
  page: {
    pageSize: 10,
    currentPage: 1,
    total: 1,

  },
  openTyep: '',
  query: {
    contentType: 3
  },
  data: []
})
function searchReset() {
  crudData.query = {
    contentType: 3
  };
  onLoad(crudData.page);
}

// 列表模糊搜索
function searchChange(params: {} | undefined, done: () => void) {
  crudData.query = Object.assign(crudData.query, params);
  crudData.page.currentPage = 1;
  onLoad(crudData.page, params);
  done();
}
const handleEmpty = () => {
  crud.value.resetForm()
}
const handleSubmit = () => {
  crud.value.validate(async (valid: any, done: () => void, msg: any) => {
    if (valid) {
      crudData.form = Object.assign(crudData.form, crudData.query)
      let submit = save
      if (crudData.form.id) {
        submit = update
      }
      await submit(crudData.form)
      ElMessage.success('操作成功');
      crud.value.closeDialog()
      onLoad(crudData.page);
    }
  })
}
const orderSubmit = async (row: { visible: boolean; }) => {
  row.visible = false
  await update(row)
  ElMessage.success('操作成功');
  onLoad(crudData.page);
}
const refreshChange = () => {
  onLoad(crudData.page);
}
const selectionChange = (list) => {
  crudData.selectionList = list
}
const delsHandler = async () => {
  if (crudData.selectionList.length === 0) {
    ElMessage.warning('请选择至少一条数据');
    return;
  }
  crudData.confirmDeleteVisible = true
  let id = ids.value
  console.log('ids', ids);
  crudData.delIds = id.join(',')
}
const handleDeleteCancel = () => {
  crudData.confirmDeleteVisible = false;
}
const handleDeleteConfirm = async () => {
  await remove(crudData.delIds)
  crudData.confirmDeleteVisible = false;
  onLoad(crudData.page)
}
const handleCommand = (command, row) => {
  crudData.rowData = row
  if (command === 'edit') {
    crud.value.rowEdit(row)
  } else if (command === 'delete') {
    crudData.confirmDeleteVisible = true;
    crudData.delIds = row.id
  }
}
const onLoad = (page, params = {}) => {
  crudData.loading = true;
  getList(page.currentPage, page.pageSize, Object.assign(params, crudData.query)).then(res => {
    console.log('getReviewLog--', res);
    const Data = res.data;
    crudData.page.total = Data.total;
    crudData.data = Data.records
    // .map(item=>({...item,rent: '12-24'}));
    crudData.loading = false;
  });
}
</script>

<style scoped lang="scss">
::v-deep .ql-editor {
  min-height: 300px;
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 2%;
}

.crud_content {
  width: 100%;
}

.btns_box {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .view_btn {
    margin-right: 20px;
  }
}

.custom-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
}

.swal2-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swal2-icon {
  position: relative;
  box-sizing: content-box;
  justify-content: center;
  width: 5em;
  height: 5em;
  margin: 1.25em auto 1.875em;
  zoom: normal;
  border: 0.25em solid transparent;
  border-radius: 50%;
  line-height: 5em;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.swal2-icon.swal2-question::before {
  content: "?";
}

.swal2-icon::before {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92%;
  font-size: 3.75em;
}

.swal2-icon.swal2-question {
  border-color: #c9dae1;
  color: #87adbd;
}

.swal2_fs {
  margin: 0 0 0.4em;
  padding: 0;
  font-size: 25px;
  color: #595959;
  text-align: center;
  font-weight: 400 !important;
}

.swal2_he {
  text-align: center;
  color: #545454;
  font-size: 1.125em;
  font-weight: 300;
  line-height: normal;
  word-wrap: break-word;
}
</style>
